import React from "react";
import Chart from "echarts-for-react";
import PublicService from '../../../services/PublicService';
import request from '../../../utils/request';
import echarts from 'echarts'
var category = [];
var dottedBase = +new Date();
var lineData = [];
var barData1 = [];
var barData2 = [];
for (var i = 0; i < 10; i++) {
    var date = new Date(dottedBase += 1000 * 3600 * 24);
    category.push([

        date.getDate()
    ].join('-'));
    // if (i<=10&&i>=1){
    //     category.push(i);
    // }
    var b = Math.random() * 200;
    var d = Math.random() * (-200);
    barData1.push(b)
    barData2.push(d)
}
var arr = []
class CenterL extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            disList: {},
            groupSignId: '1'
        }

    }
    componentDidMount() {
        this.onsave('1')
    }


    componentWillReceiveProps() {
        setTimeout(() => {
            // console.log(this.props.id)
            this.onsave(this.props.id)
        }, 500);
      
    }
    onsave = (val) => {
        // console.log(val)
        request({
            url: `/zhrq-web/cockpit/common/getGasCylindersData`,
            method: 'POST',
            data: { groupSignId: val }
        }).then(data => {
            // console.log(data)


            if (data.rc === 0) {
                arr = []
                data.ret.xsValueList.forEach(item => {
                    item = 0-item
                    arr.push(item)
                });
                // console.log(arr)
                this.setState({
                    disList: data.ret
                })
            }
        })
    }



    setOption = () => {
        let data = this.state.disList
        return {

            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true,
                        backgroundColor: '#333'
                    }
                }
            },
            legend: {
                data: ['进气量', '销售量', '库存量'],
                textStyle: {
                    color: '#ccc'
                },
                itemWidth: 16,
                itemHeight: 8

            },
            xAxis: {
                type: 'category',
                data: data.timeList,

                splitLine: {
                    show: false,

                },

                axisLine: {
                    lineStyle: {
                        color: '#70D7FF'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 10
                },
                axisTick: {
                    show: false
                }
            },
            grid: {
                top: '26%',
                left: '7%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            yAxis: [{
                type: 'value',



                axisTick: {
                    show: false
                },

                nameTextStyle: {
                    color: '#fff',
                    fontSize: 10
                },
                axisLine: {
                    lineStyle: {
                        color: '#70D7FF'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 10
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#70D7FF'
                    }
                },

            }],
            series: [{
                name: '进气量',
                type: 'bar',
                stack: 'one',
                barWidth: 10,
                itemStyle: {
                    normal: {
                        barBorderRadius: 3,
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0.5, color: '#70D7FF' },
                                { offset: 1, color: '#122742' }
                            ]
                        )
                    }
                },
                data: data.jqValueList
            }, {
                name: '销售量',
                type: 'bar',
                stack: 'one',
                barWidth: 10,
                itemStyle: {
                    normal: {
                        barBorderRadius: 3,
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: '#122742' },
                                { offset: 0.5, color: 'orange' }
                            ]
                        )
                    }
                },
                data: arr
            },
            {
                name: "库存量",
                type: "line",

                symbolSize: 10,
                symbol: 'circle',
                itemStyle: {
                    normal: {
                        color: "#38798E",
                        barBorderRadius: 0,
                        label: {
                            show: false,
                            position: "top",
                            formatter: function (p) {
                                return p.value > 0 ? (p.value) : '';
                            }
                        }
                    }
                },
                data: data.kcValueList
            },]
        };



    }

    render() {

        return (

            <Chart option={this.setOption()} notMerge lazyUpdate style={{ height: "80%", float: "left", width: "50%" }}
                echartsInstance={this.save}
            />




        );
    }

}

export default CenterL;
